<template>
  <div class="user_container">
    <div class="input_box">
      <el-input v-model="cname" style="width: 240px" placeholder="课程名称" />
       <el-select v-model="type" placeholder="课程状态" style="width: 240px">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
       </el-select>
      <el-button @click="search()">查询</el-button>
      <el-button type="primary" @click="addClick()">新增课程</el-button>
    </div>
    <div style="margin-top: 10px">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="180" />
        <el-table-column prop="cname" label="课程名称" width="180" />
        <el-table-column prop="teacher" label="授课讲师" />
        <el-table-column prop="price" label="价格" />
        <el-table-column type="index" label="排序" width="180" />
        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-switch
            @change="changeType(scope.row)"
              v-model="scope.row.type"
              size="large"
              active-text="已发布"
              inactive-text="草稿"
            />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-button @click="openEdit(scope.row)">
              营销信息
            </el-button>
            <el-button  @click="openContent(scope.row)">内容管理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <el-dialog
    v-model="centerDialogVisible"
    :title="operation ? '新增课程' : '编辑课程'"
    width="600"
    align-center
  >
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <div style="font-size:20px">基本信息</div>
       <el-divider />
      <el-form-item label="名称">
        <el-input v-model="form.cname" />
      </el-form-item>
      <el-form-item label="简介">
        <el-input v-model="form.desc" />
      </el-form-item>
      <el-form-item label="讲师姓名">
        <el-input v-model="form.teacher" />
      </el-form-item>
      <el-form-item label="讲师简介">
        <el-input v-model="form.tdesc" />
      </el-form-item>
      <el-form-item label="课程概述">
        <el-input v-model="form.content" />
      </el-form-item>

    <div style="font-size:20px">销售信息</div>
       <el-divider />
       <el-form-item label="售卖价格">
        <el-input v-model="form.price" />
      </el-form-item>
      <el-form-item label="商品原价">
        <el-input v-model="form.old_price" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="operation ? add() : put()">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
    v-model="courseDialogVisible"
    :title="courseFrom.c_name"
    width="600"
    align-center
  >
    <div style="margin-bottom:10px">
        <el-button type="primary" @click="openCapAdd()">+ 添加章节</el-button>
    </div>
    <div class="capterbox" v-for="(item,index) of capterList" :key="index" style="height:50px;line-height:45px">
        <span>{{item.name}}</span>
        <div style="position: absolute;right:20px;top:5px">
            <el-button size="small" @click="openCapEdit(item)">编辑</el-button>
        <el-button size="small" type="danger" @click="delC(item.id)">删除</el-button>
        </div>
    
    </div>
  </el-dialog>
<el-dialog
    v-model="capterDialogVisible"
    :title="operation2 ? '新增章节' : '编辑章节'"
    width="600"
    align-center
  >
    <el-form :model="courseFrom" label-width="auto" style="max-width: 600px">
      <div style="font-size:20px">基本信息</div>
       <el-divider />
      <el-form-item label="课程名称" >
        <el-input v-model="courseFrom.c_name" disabled/>
      </el-form-item>
      <el-form-item label="章节名称">
        <el-input v-model="courseFrom.name" />
      </el-form-item>
      <el-form-item label="章节描述">
        <el-input v-model="courseFrom.desc" />
      </el-form-item>
      <el-form-item label="章节排序">
        <el-input v-model="courseFrom.order" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="operation2 ? addC() : putC()">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  
</template>

<script>
import { getapi, postapi, putapi, delapi } from "../utils/request";
import router from "../router/index";
export default {
  data() {
    return {
      cname: "",
      type: "",
      tableData: [],
      centerDialogVisible: false,
      courseDialogVisible:false,
      capterDialogVisible:false,
      operation: false,
      operation2:false,
      options: [
        {
            value: '全部',
            label: '全部',
        },
        {
            value: '已发布',
            label: '已发布',
        },
        {
            value: '草稿',
            label: '草稿',
        },
    ],
      form: {
        id: "",
        cname: "",
        teacher: "",
        price: "",
        type: "",
        desc: "",
        tdesc: "",
        content: "",
        old_price: "",
      },
      courseFrom:{
          id:'',
          c_id:'',
          c_name:'',
          name:'',
          desc:'',
          order:''
      },
      capterList:[]
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      getapi("/course").then((res) => {
        this.tableData = res.data;
      });
    },
    add() {
      this.form.id = this.tableData.length + 1;
      this.form.type=false;
      postapi("/course", this.form).then((res) => {
        this.getData();
        alert("添加成功");
        this.centerDialogVisible = false;
      });
    },
    put() {
      putapi("/course/" + this.form.id, this.form).then((res) => {
        this.getData();
        alert("修改成功");
        this.centerDialogVisible = false;
      });
    },
    addClick() {
      this.centerDialogVisible = true;
      this.operation = true;
      this.form= {
        id: "",
        cname: "",
        teacher: "",
        price: "",
        type: "",
        desc: "",
        tdesc: "",
        content: "",
        old_price: "",
      }
    },
    openEdit(data) {
      this.centerDialogVisible = true;
      this.operation = false;
      this.form = data;
    },
    search() {
      getapi("/course").then((res) => {
        let datas = res.data;
        if(this.cname==''&&this.type=='全部'){
          this.tableData = datas;
        }else{
          datas = datas.filter((user) => {
        let type=this.type=="已发布"?true:false
        console.log(user.cname.indexOf(this.cname) > -1);
          return (
            user.cname.indexOf(this.cname) > -1 &&
            user.type==type
          );
        });
        this.tableData = datas;
        }
        
      });
    },
    changeType(data){
        putapi("/course/" + data.id, data).then((res) => {
            this.getData();
      });
    },
    openContent(data){
        this.courseDialogVisible=true
        this.courseFrom.c_id=data.id
        this.courseFrom.c_name=data.cname
        this.getCapter(data.id)
    },
    getCapter(id){
        getapi("/capter").then((res) => {
        this.capterList = res.data.filter(data=>data.c_id==id);
      });
    },
    openCapEdit(data){
        this.capterDialogVisible=true;
        this.courseFrom=data
        this.operation2=false
    },
    openCapAdd(){
        this.capterDialogVisible=true;
        this.operation2=true
        this.courseFrom.id="",
        this.courseFrom.name="",
        this.courseFrom.desc="",
        this.courseFrom.order=""
        
      
    },
    putC(){
        putapi("/capter/" + this.courseFrom.id, this.courseFrom).then((res) => {
            this.getCapter(this.courseFrom.c_id);
            this.capterDialogVisible=false
      });
    },
    addC(){
        this.courseFrom.id=this.capterList.length+1
        postapi("/capter/", this.courseFrom).then((res) => {
            this.getCapter(this.courseFrom.c_id);
            this.capterDialogVisible=false
      });
    },
    delC(id){
        delapi("/capter/"+id).then(res=>{
            this.getCapter(this.courseFrom.c_id);
            alert("删除成功")
        })
    }
  },
};
</script>

<style scoped>
.user_container {
  background-color: #e9eef3;
  height: 100%;
  box-sizing: border-box;
  padding: 10px;
}
.input_box {
  display: flex;
  gap: 10px;
}
.el-divider--horizontal{
    margin: 10px 0 !important
}
.capterbox:hover{
    background-color: rgb(230, 240, 247);
    cursor: pointer;
}
.capterbox{
    box-sizing: border-box;
    padding: 5px;
    position: relative;
    border-bottom: solid 1px #e9eef3;
    
}

</style>